<template>
    <div class="charts" ref="progress"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "index",

        mounted() {
            let barCharts = echarts.init(this.$refs.progress);
            barCharts.setOption({
                xAxis: {
                    show: false,

                    // 最大值最小值设置
                    min: 0,
                    max:100,
                },
                yAxis: {
                    show: false,
                    type: 'category'
                },
                series: [
                    {
                        type: 'bar',
                        data:[78],
                        color: 'yellowgreen',

                        // 柱状图宽度设置
                        barWidth: 10,

                        // 背景颜色的设置
                        showBackground: true,
                        backgroundStyle: {
                            color: '#eee',
                        },

                        // 文本设置
                        label: {
                            show: true,
                            // 改变文本内容
                            formatter: '|',
                            // 文本标签位置的调试
                            position: 'right'
                        }
                    }
                ],
                grid: {
                    left: 10,
                    top: 10,
                    bottom: 10,
                    right:10,
                }
            });
        }
    }
</script>

<style scoped>
    .charts {
        width: 100%;
        height: 100%;
    }
</style>
